import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_book_store/routes/app_pages.dart';
import 'package:get/get.dart';
import 'login.dart';
class ChangePwdPage extends GetView {

  Map<String, dynamic> data = Map();
  var oldKey = 'OLD_KEY';
  var newKey = 'NEW_KEY';
  var reNewKey = 'RE_NEW_KEY';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          InputText(
            data: data,
            dataKey: oldKey,
            title: '旧密码',
            hintText: '请输入旧密码',
            obscureText: false,
          ),
          InputText(
            obscureText: true,
            data: data,
            dataKey: newKey,
            title: '新密码 ',
            hintText: '请输入新密码',
          ),
          InputText(
            obscureText: true,
            data: data,
            dataKey: reNewKey,
            title: '新密码 ',
            hintText: '请再次输入新密码',
          ),
          SizedBox(
            height: 16,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24),
            child: Column(
              children: [
                MaterialButton(
                  minWidth: double.infinity,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(16))),
                  child: Text(
                    '提交',
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                  color: Colors.blue,
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ],
      ),
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          onPressed: () {
            Get.back();
          },
          icon: Icon(
            Icons.arrow_back_ios,
            color: Colors.blue,
          ),
        ),
        centerTitle: true,
        title: Text(
          '密码设置',
        ),
      ),
    );
  }
}

class InputText extends StatelessWidget {
  final title;
  final hintText;
  final data;
  final dataKey;
  final obscureText;

  const InputText(
      {Key key,
      this.title,
      this.hintText,
      this.data,
      this.dataKey,
      this.obscureText})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.baseline,
            children: [
              Text(
                title,
                style: TextStyle(color: Colors.black, fontSize: 16),
              ),
              SizedBox(
                width: 32,
              ),
              Expanded(
                  child: ClearTextField(
                dataKey: dataKey,
                data: data,
                hintText: hintText,
                isPassword: obscureText,
              )),
            ],
          ),
          Container(
            height: 1,
            color: Colors.grey.shade300,
            width: double.infinity,
          )
        ],
      ),
    );
  }
}

class ClearTextField extends StatefulWidget {
  final String hintText;
  final isPassword;
  final data;
  final dataKey;

  const ClearTextField(
      {Key key, this.hintText, this.isPassword, this.data, this.dataKey})
      : super(key: key);

  @override
  _ClearTextFieldState createState() {
    return _ClearTextFieldState();
  }
}

class _ClearTextFieldState extends State<ClearTextField> {
  String _inputText = "";
  bool _hasDeleteIcon = false;
  bool _hasFocus = false;

  ///输入框焦点控制
  FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(_focusNodeListener);
  }

  Future<Null> _focusNodeListener() async {
    if (_focusNode.hasFocus) {
      setState(() {
        _hasFocus = true;
      });
    } else {
      setState(() {
        _hasFocus = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    TextEditingController _controller = TextEditingController.fromValue(
        TextEditingValue(
            text: _inputText,
            selection: TextSelection.fromPosition(TextPosition(
                affinity: TextAffinity.downstream,
                offset: _inputText.length))));
    TextField textField = TextField(
      focusNode: _focusNode,
      controller: _controller,
      inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp(r'[a-zA-Z]|[0-9]')),
      ],
      decoration: InputDecoration(
        hintText: widget.hintText,
        hintStyle: TextStyle(color: Colors.grey, fontSize: 16),
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        suffixIcon: _hasDeleteIcon && _hasFocus
            ? Container(
                width: 20.0,
                height: 20.0,
                child: IconButton(
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(0.0),
                  iconSize: 20.0,
                  icon: Icon(Icons.cancel),
                  onPressed: () {
                    setState(() {
                      _inputText = "";
                      _hasDeleteIcon = _inputText.isNotEmpty;
                    });
                  },
                ),
              )
            : Text(""),
      ),
      onChanged: (str) {
        widget.data[widget.dataKey] = str;
        setState(() {
          _inputText = str;
          _hasDeleteIcon = _inputText.isNotEmpty;
        });
      },
      onSubmitted: (str) {
        setState(() {
          _hasFocus = false;
        });
      },
      maxLines: 1,
      style: TextStyle(color: Colors.black, fontSize: 16),
      obscureText: widget.isPassword,
    );
    return textField;
  }
}
